<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8"/>
    <title>Mall - 购物车</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/fontawesome-all.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/animate.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/magnific-popup.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/nice-select.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/pe-icon-7-stroke.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/slick.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/ui-range-slider.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/meanmenu.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/swipper.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/main.css"/>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            re_sum();
        });

        function re_sum() {
            const amounts = $(".product-subtotal .amount");
            let sum = 0;
            for (let i = 0; i < amounts.length; i++) {
                sum += parseFloat(amounts[i].innerText.replace("￥", "").trim());
            }
            if (sum.toString().indexOf(".") === -1) {
                sum = sum.toString() + ".00";
            }
            $("#sum").text(sum);
        }

        function count_plus(obj) {
            const e = $(obj);
            e.prev().val(parseInt(e.prev().val()) + 1);
            const unit = parseFloat(e.parent().parent().parent().prev().children().text().replace("￥", "").trim());//单价
            const count = parseInt(e.prev().val());//数量
            let total = unit * count.toFixed(2);//总价
            if (total.toString().indexOf(".") === -1) {
                total = total.toString() + ".00";
            }
            e.parent().parent().parent().next().children().text("￥ " + total);
            re_sum();
        }

        function count_minus(obj) {
            const e = $(obj);
            if (parseInt(e.next().val()) > 1) {
                e.next().val(parseInt(e.next().val()) - 1);
            }
            const unit = parseFloat(e.parent().parent().parent().prev().children().text().replace("￥", "").trim());//单价
            const count = parseInt(e.next().val());//数量
            let total = unit * count.toFixed(2);//总价
            if (total.toString().indexOf(".") === -1) {
                total = total.toString() + ".00";
            }
            e.parent().parent().parent().next().children().text("￥ " + total);
            re_sum();
        }

        function remove_goods(obj) {
            const e = $(obj);
            if (confirm("确定要将其移出购物车吗？")) {
                $.post("/api/remove-from-cart",
                    {"gid": $($($(e.parent().parent().children()[0]).children()[0]).children()[0]).attr("alt")},
                    function (data) {
                        if (JSON.parse(data).isSuccess) {
                            e.parent().parent().remove();
                            re_sum();
                            alert("移出购物车成功");
                        } else {
                            alert("移出购物车失败");
                        }
                    }
                );
            }
        }

        function go_bill() {
            const trs = $("tr");
            if (trs.length > 1) {
                let data = "[";
                for (let i = 1; i < trs.length; i++) {
                    const tr = trs[i];
                    const gid = $($($($(tr).children()[0]).children()[0]).children()[0]).attr("alt");
                    const count = $($($($($(tr).children()[3]).children()[0]).children()[0]).children()[1]).val();
                    data += "{\"gid\":\"" + gid + "\",\"count\":\"" + count + "\"}";
                    if (i != trs.length - 1) {
                        data += ",";
                    }
                }
                data += "]";
                $(location).attr("href", "/checkout?cart=true&data=" + encodeURI(data));
            }else{
                alert("购物车中没有内容，请先挑选商品加入购物车后再进行结账！");
            }
        }
    </script>
</head>

<body>
<div class="header-area bg-black-2 d-none d-lg-block">
    <div class="header-top-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xxl-3 col-lg-3">
                    <div class="header-left-2">
                        <div class="logo-2">
                            <a href="${pageContext.request.contextPath}/">
                                <img src="../assets/img/logo/logo-white.png">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-9 col-lg-9">
                    <div class="header-right-2 text-end">
                        <div class="epix-header-list-2 d-inline-block">
                            <ul>
                                <li>
                                    <c:choose>
                                        <c:when test="${sessionScope.username!=null}">
                                            <a style="color: white">欢迎您：${sessionScope.username}</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/logout" id="logout"> 注销</a>
                                        </c:when>
                                        <c:when test="${sessionScope.username==null}">
                                            <a href="${pageContext.request.contextPath}/login">登录</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/register"> 注册</a>
                                        </c:when>
                                    </c:choose>
                                </li>
                                <li><a href="${pageContext.request.contextPath}/cart">购物车</a></li>
                                <li><a href="${pageContext.request.contextPath}/order-list">历史订单</a></li>
                                <c:if test="${sessionScope.isAdmin==true}">
                                    <li><a href="${pageContext.request.contextPath}/goodsAll.jsp">后台</a></li>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<main>
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="first_object"></div>
                <div class="object" id="second_object"></div>
                <div class="object" id="third_object"></div>
            </div>
        </div>
    </div>
    <c:choose>
        <c:when test="${sessionScope.username==null}">
            <h3 style="margin-top: 3%;" align="center">尚未登录，请先 <em>
                <a style="color: #0a58ca;" href="${pageContext.request.contextPath}/login">登录</a></em>
            </h3>
        </c:when>
        <c:otherwise>
            <div class="cart-area pb-100" style="margin-top: 2%;">
                <div class="container">
                    <div class="cart-box">
                        <div class="table-content table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th class="product-thumbnail">图片</th>
                                    <th class="cart-product-name">产品名称</th>
                                    <th class="product-price">单价</th>
                                    <th class="product-quantity">数量</th>
                                    <th class="product-subtotal">合计</th>
                                    <th class="product-remove">移除</th>
                                </tr>
                                </thead>
                                <c:if test="${requestScope.countList.size()>=1}">
                                    <tbody>
                                    <c:forEach begin="0" end="${requestScope.countList.size()-1}" var="i" step="1">
                                        <tr>
                                            <td class="product-thumbnail">
                                                <a href="${pageContext.request.contextPath}/detail?goods-id=${requestScope.goodsList.get(i).id}">
                                                    <img src="${requestScope.goodsList.get(i).picture}"
                                                         alt="${requestScope.goodsList.get(i).id}">
                                                </a>
                                            </td>
                                            <td class="product-name">
                                                <a href="${pageContext.request.contextPath}/detail?goods-id=${requestScope.goodsList.get(i).id}">${requestScope.goodsList.get(i).goods_name}</a>
                                            </td>
                                            <td class="product-price"><span
                                                    class="amount">￥ ${requestScope.goodsList.get(i).price}</span></td>
                                            <td>
                                                <div class="d-inline-block border-gray">
                                                    <div class="epix-quantity-form">
                                                        <button onclick="count_minus(this)" class="minus">-</button>
                                                        <input type="text" value="${requestScope.countList.get(i)}">
                                                        <button onclick="count_plus(this)" class="plus">+</button>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="product-subtotal">
                                                <span class="amount">￥ ${requestScope.goodsList.get(i).price*requestScope.countList.get(i)}</span>
                                            </td>
                                            <td class="product-remove">
                                                <a onclick="remove_goods(this)">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </c:if>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-md-5 ms-auto">
                                <div class="cart-page-total">
                                    <h2>总价</h2>
                                    <ul class="mb-20">
                                        <li><span style="float: none;">￥ <span id="sum"></span></span></li>
                                    </ul>
                                    <a onclick="go_bill()" class="os-btn">结账</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </c:otherwise>
    </c:choose>
</main>
<div class="footer-copyright-2" style="position: fixed;bottom: 0;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col-xxl-9 col-xl-6 col-lg-6">
                <p>Copyrights © 2021 EPIXX. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/isotope.pkgd.min.js"></script>
<script src="../assets/js/slick.min.js"></script>
<script src="../assets/js/swipper-bundle.min.js"></script>
<script src="../assets/js/jquery.meanmenu.min.js"></script>
<script src="../assets/js/wow.min.js"></script>
<script src="../assets/js/nice-select.js"></script>
<script src="../assets/js/jquery.elevatezoom.js"></script>
<script src="../assets/js/jquery.scrollUp.min.js"></script>
<script src="../assets/js/jquery-ui-slider-range.js"></script>
<script src="../assets/js/countdown.min.js"></script>
<script src="../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../assets/js/imagesloaded.pkgd.min.js"></script>
<script src="../assets/js/mouse-wheel.min.js"></script>
<script src="../assets/js/main.js"></script>
</body>

</html>